<template>
  <div class="main">
    <div style="width: 100%;height: 40px;background-color: #fff;margin-bottom: 20px;padding: 10px;">当前模块:<span
        style="font-weight: bold;">寄宿生申请审核操作模块</span> </div>
    <div class="main-body">

      <div class="main-header float-left">

        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">

          <el-form-item label="学校	：">
            <el-select v-model="formInline.yxqdm" placeholder="请选择学校" @change="yxqdmChange">
              <el-option v-for="item in xq_list" :key="item.newXqdm" :label="item.xqjc" :value="item.newXqdm">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年级：">
            <el-select v-model="formInline.njDm" placeholder="请选择年级">
              <el-option v-for="(item, index) in schoolList" :key="DM" :label="item.MC" :value="item.DM">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学生姓名：">
            <el-input v-model="formInline.stuIdIsName" placeholder="请输入学生姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- </div> -->
      </div>

      <el-dialog title="寄宿生申报情况显示与审核操作窗口" :visible.sync="dialogDetails" width="1000px" :before-close="handleClose">
        <!-- <div style="text-align: center;width: 100%;height: 50px;background-color: antiquewhite;line-height: 50px;">
          此页面内容可以直接打印，请按右面的图标打印本页内容
          <el-button type="primary" icon="el-icon-printer" style="float: right;" v-print="printOption">打印</el-button>
        </div> -->
        <div style="padding: 6px;" class="font-all" id="nbprint">
          <div
            style="height: 40px;background-color: #FFEDED;color: #1C511C;font-size: 16px; display: flex;justify-content: center;align-items: center">
            申请寄宿学生的基本信息
          </div>


          <el-descriptions class="margin-top" :column="3" size="small" border>
            <el-descriptions-item label="身份证号">{{ headerLoadData.SFZJH }}</el-descriptions-item>
            <el-descriptions-item label="学生姓名">{{ headerLoadData.XM }}</el-descriptions-item>
            <el-descriptions-item label="学生性别">{{ headerLoadData.xbmc }}</el-descriptions-item>

            <el-descriptions-item label="原就读">{{ headerLoadData.XQJC }}</el-descriptions-item>
            <el-descriptions-item label="就读年纪">{{ headerLoadData.njmc }}</el-descriptions-item>
            <el-descriptions-item label="学生类别">{{ headerLoadData.xslb }}</el-descriptions-item>

            <el-descriptions-item label="家庭类别" :span="2"></el-descriptions-item>
            <el-descriptions-item label="申请寄宿校" :labelStyle="{ 'color': 'red' }">
              <el-select v-model="jssStuYdList.hxqdm" placeholder="请选择" size="mini" class="width_100">
                <el-option v-for="item in xxdwXqList" :key="item.newXqdm" :label="item.xqjc"
                  :value="item.newXqdm"></el-option>
              </el-select>
            </el-descriptions-item>

            <el-descriptions-item label="编入班级">
              <el-select v-model="jssStuYdList.ydlx" placeholder="请选择" size="mini" class="width_100">
                <el-option v-for="i in 15" :key="i < 10 ? '0' + i : + i" :label="i < 10 ? '0' + i + '班' : + i + '班'"
                  :value="i < 10 ? '0' + i : + i"></el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="健康状况">
              <el-select v-model="jssStuYdList.jkzk" placeholder="请选择" size="mini" class="width_100">
                <el-option v-for="item in dm_jkzk" :key="item.DM" :label="item.MC" :value="item.DM"></el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="监护人类别">
              <el-select v-model="jssStuYdList.jhrlb" placeholder="请选择" size="mini" class="width_100">
                <el-option v-for="item in dm_jhrlb" :key="item.DM" :label="item.MC" :value="item.DM"></el-option>
              </el-select>
            </el-descriptions-item>
            <!-- <el-descriptions-item label="备注">
              <el-tag size="small">学校</el-tag>
            </el-descriptions-item> -->
            <!-- <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item> -->
          </el-descriptions>
          <div
            style="height: 40px;background-color: #fcea9e;color: red;font-size: 16px; display: flex;justify-content: center;align-items: center;margin-top: 4px;">
            请认真且正确填写学生家庭信息！ 学生家庭主要成员（最多两个）
          </div>
          <el-descriptions class="margin-top" :column="3" size="small" border>
            <el-descriptions-item label="成员1称谓">
              <el-input placeholder="请输入内容" v-model="tStuJtcyList[0].cw" clearable size="mini"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="成员姓名">
              <el-input placeholder="请输入内容" v-model="tStuJtcyList[0].name" clearable size="mini"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="年龄">
              <el-input placeholder="请输入内容" v-model="tStuJtcyList[0].age" clearable size="mini"></el-input>
            </el-descriptions-item>

            <el-descriptions-item label="最高学历">
              <el-select v-model="tStuJtcyList[0].xl" placeholder="请选择" size="mini" class="width_100">
                <el-option v-for="item in dm_xl" :key="item.DM" :label="item.MC" :value="item.DM">
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="工作单位">
              <el-input placeholder="请输入内容" v-model="tStuJtcyList[0].gzdw" clearable size="mini"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="联系电话">
              <el-input placeholder="请输入内容" v-model="tStuJtcyList[0].lxfs" clearable size="mini"></el-input>
            </el-descriptions-item>

            <el-descriptions-item label="成员2称谓">
              <el-input placeholder="请输入内容" v-model="tStuJtcyList[1].cw" clearable size="mini"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="成员姓名">
              <el-input placeholder="请输入内容" v-model="tStuJtcyList[1].name" clearable size="mini"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="年龄">
              <el-input placeholder="请输入内容" v-model="tStuJtcyList[1].age" clearable size="mini"></el-input>
            </el-descriptions-item>

            <el-descriptions-item label="最高学历">
              <el-select v-model="tStuJtcyList[1].xl" placeholder="请选择" size="mini" class="width_100">
                <el-option v-for="item in dm_xl" :key="item.DM" :label="item.MC" :value="item.DM">
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="工作单位">
              <el-input placeholder="请输入内容" v-model="tStuJtcyList[1].gzdw" clearable size="mini"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="联系电话">
              <el-input placeholder="请输入内容" v-model="tStuJtcyList[1].lxfs" clearable size="mini"></el-input>
            </el-descriptions-item>
          </el-descriptions>



          <!-- <table border='0' cellspacing="0" cellpadding="0"
            style="border-collapse:collapse;border-style:none; font-size:15px; width:100%;">
            <tr>
              <td style="text-align:right; font-size:13px; height:50px; line-height:50px; padding-right:10px;">
                查询日期:{{ getNowTimeDate() }}
              </td>
            </tr>
          </table> -->
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button type="success" @click="pushPass" size="mini">申请审核通过</el-button>
          <el-button type="info" @click="pushNoPass" size="mini" plain>申请审核不通过</el-button>
          <el-button @click="dialogDetails = false" size="mini">放弃修改</el-button>
        </span>
      </el-dialog>

      <div class="main-center float-left">
        <el-table :data="tableData" height="650" style="width: 100%;margin-top: 6px;"
          :header-cell-style="{ background: '#fafafa', color: '#000000e0', fontWeight: 600 }">

          <el-table-column prop="yxqdmString" label="来源学校"></el-table-column>
          <el-table-column prop="hxqdmString" label="去向学校"></el-table-column>
          <el-table-column prop="sqsj" label="申请日期"></el-table-column>
          <el-table-column prop="stuIdIsName" label="姓名"></el-table-column>
          <el-table-column prop="njString" label="年级"></el-table-column>
          <el-table-column prop="sjz" label="审核状态">
            <template slot-scope="scope" style="z-index: -9999;">
              <span v-if="scope.row.sjz == '0'">不通过</span>
              <span v-else-if="scope.row.sjz == '1'">通过</span>
              <span v-else>未终审</span>
            </template>
          </el-table-column>
          <el-table-column prop="ydlczt" label="流程状态">
            <template slot-scope="scope" style="z-index: -9999;">
              <span v-if="scope.row.ydlczt == '0'">拒接收</span>
              <span v-else-if="scope.row.ydlczt == '1'">已接收</span>
              <span v-else>待接收</span>
            </template>
          </el-table-column>
          <el-table-column label="详情" width="100">
            <template slot-scope="scope" style="z-index: -9999;">
              <el-button @click="handleClick(scope.row)" type="text" size="small"
                style="color: #ff4d4f;">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="footer-pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formInline.currentPage" :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]"
            :page-size="formInline.limit" layout="total, sizes, prev, pager, next, jumper" :total="formInline.total">
          </el-pagination>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import httplogin from "../../api/login";
export default {
  name: 'Social',
  data() {
    return {
      printOption: {
        id: 'nbprint', // 打印元素的id 不需要携带#号
        popTitle: '教职工基本信息登记表' // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
      },
      tableData: [],
      formInline: {
        yxqdm: "",
        njDm: '',
        stuIdIsName: '',
        ddl_xz: '',
        ddl_jdfs: '',
        currentPage: 1,
        limit: 10,
        total: 0
      },
      xq_list: [],//校区类别 options
      dialogDetails: false,
      JiSuShengInfo: {},
      schoolList: [],
      selectOptions: {
        dm_jkzk: '',
      },
      headerLoadData: {},
      dm_jkzk: [{}],
      tStuJtcyList: [
        {
          "cw": "父亲",
        },
        {
          "cw": "母亲",
        }
      ],//家庭信息
      dm_jhrlb: [],//监护人类别
      dm_xl: [],//学历信息
      xxdwXqList: [],
      jssStuYdList: {},
      classList: [
        {
          id: '01',
          className: '01'
        },
      ]

    }
  },
  mounted() {
    this.getOnGuardFacultyway()
    // this.getschoolList()
  },
  methods: {
    yxqdmChange() {
      this.getOnGuardFacultyway()
    },
    async pushNoPass(row) {
      let jssSqVo = {
        jssStuYd: this.jssStuYdList,
        jtcyList: this.tStuJtcyList
      }
      let res = await httplogin.handleJssSHNoConsentApi(jssSqVo);
      if (res.data.code == 200) {
        this.$message({ showClose: true, message: res.data.data.data, type: 'success' });
      } else {
        this.$message({ showClose: true, message: res.data.data.data, type: 'warning' });
      }
      this.dialogDetails = false
      this.getOnGuardFacultyway()
    },
    async pushPass(row) {
      console.log(row);
      let jssSqVo = {
        jssStuYd: this.jssStuYdList,
        jtcyList: this.tStuJtcyList
      }
      let res = await httplogin.handleJssSHConsentApi(jssSqVo);
      if (res.data.code == 200) {
        this.$message({ showClose: true, message: res.data.data.data, type: 'success' });
      } else {
        this.$message({ showClose: true, message: res.data.data.data, type: 'warning' });
      }
      this.dialogDetails = false
      this.getOnGuardFacultyway()
    },
    async getOnGuardFacultyway() {
      let data = {
        GWZT: 1,
        current: this.formInline.currentPage,
        size: this.formInline.limit,
        yxqdm: this.formInline.yxqdm,
        njDm: this.formInline.njDm,
        stuIdIsName: this.formInline.stuIdIsName,
      }
      let res = await httplogin.getJssSq(data);
      if (res.data.code == 200) {
        this.tableData = res.data.data.data.data;
        this.xq_list = res.data.data.data.xq;
        this.formInline.total = res.data.data.data.count;
        this.schoolList = res.data.data.data.nj;


        // this.formInline.total = res.data.data.num
      }
    },
    // async getschoolList() {
    //   let res = await httplogin.getUserPermissionInfo();
    //   if (res.data.code == 200) {
    //     if (res.data.data.estate == "区级") {
    //       this.schoolList = res.data.data.UserPermission
    //       this.sortPingyinfun(this.schoolList)
    //     }
    //   }
    // },

    getNowTimeDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = ('0' + (now.getMonth() + 1)).slice(-2);
      const day = ('0' + now.getDate()).slice(-2);
      // const hours = ('0' + now.getHours()).slice(-2);
      // const minutes = ('0' + now.getMinutes()).slice(-2);
      // const seconds = ('0' + now.getSeconds()).slice(-2);
      const formattedTime = year + "年" + month + "月" + day + "日"
      return formattedTime
    },
    sortPingyinfun(list) {
      list.sort((a, b) => a.XQJC.localeCompare(b.XQJC))
      return list
    },
    //点击查看详情 open 弹框
    handleClick(row) {
      console.log(row)
      this.getJssSqEditLoad(row)
      this.dialogDetails = true
    },
    async getJssSqEditLoad(val) {
      let obj = {
        stuId: val.stuId,
      }
      let res = await httplogin.getJssSqEditLoad(obj)
      const { dm_jkzk, headerLoadData, tStuJtcyList, xxdwXqList, dm_jhrlb, dm_xl, jssStuYdList } = res.data.data.data
      if (res.data.code == 200) {
        this.dm_jkzk = dm_jkzk
        this.headerLoadData = headerLoadData[0] || {}
        this.tStuJtcyList = tStuJtcyList
        this.xxdwXqList = xxdwXqList
        this.dm_jhrlb = dm_jhrlb
        this.dm_xl = dm_xl
        this.jssStuYdList = jssStuYdList[0]
        // this.JiSuShengInfo = res.data.data.jzgInfo
      }
    },
    //close 弹框
    handleClose() {
      this.dialogDetails = false
    },
    onSubmit() {
      this.getOnGuardFacultyway()
      console.log(this.formInline);
    },
    handleSizeChange(val) {
      this.formInline.limit = val
      this.getOnGuardFacultyway()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.formInline.currentPage = val
      this.getOnGuardFacultyway()
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style scoped>
.width_100 {
  width: 100%;
}

.main {
  width: 100%;
  float: left;
  height: auto;
  box-sizing: border-box;
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f6f6f6;
  overflow-x: auto;
  overflow-y: auto;
}

.main-body {
  width: 100%;
  height: auto;
  float: left;
  background-color: #fff;
  box-sizing: border-box;
  padding: 18px;
  border-radius: 12px;
}

.float-left {
  width: 100%;
  height: auto;
  float: left;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.d-flex {
  display: flex;
  align-items: center;
}

.mr-24 {
  margin-right: 24px;
}

.fontcolor {
  color: rgba(0, 0, 0, 0.88);
  word-break: break-word;
  line-height: 1.5714285714285714;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-size: 14px;
  box-sizing: border-box;
}

.footer-pagination {
  padding: 10px 0 0 0;
  text-align: right;
}

.font-all {
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  scrollbar-color: rgba(0, 0, 0, 0.25) rgba(5, 5, 5, 0.06);
}
</style>

<style scoped>
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
  padding: 0 !important;
}

::v-deep .el-dialog__header {
  background-color: #ff4d4f !important;

}

::v-deep .el-dialog__title {
  line-height: 24px;
  font-size: 20px;
  color: #fff !important;
  /* font-weight: 600; */
}
</style>